<template>
  <view class="topbar" :style="{'height' : statusBarHeight + barHeight + addHeight + 'px;'}">
    <view class="topbar-main" :style="{'height' : statusBarHeight + barHeight + 'px'}">
		<image :src="imgSrc" v-if="imgSrc !== null" mode="" class="topbar-main"></image>
		<!-- 手机状态栏 -->
		<view class="status-bar" :style="{'height':statusBarHeight + 'px','background-color':'#ffda03'}">	
		</view>
		<!-- 导航栏 -->
		<view class="navbar-box" :style="{'top':statusBarHeight + 'px','height':barHeight + 'px'}">
			<!-- 顶栏实际可操控区域 -->
			<view class="navbar-cont">
				<slot name="content"></slot>
			</view>
		</view>
    </view>
    <view class="addition-area" :style="{'height': addHeight + 'px'}" v-if="addHeight !== 0">
		<view class="addition-area-content">
			<slot name="addition-area"></slot>
		</view>
    </view>

  </view>
</template>
<script>
export default {
  name:'topbar',
  props:{
	imgSrc:{
		type:String,
		default: null
	},
	addHeight:{
		type: Number,
		default: 0
	}
  },
  data () {
    return {
      statusBarHeight: 20,//状态栏的高度（可以设置为顶部导航条的padding-top）
      barHeight: 44,
	  barWidth: null,
	  barContHeight: null,
	  barContTop: null
    }
  },
  methods: {
    goToBack () {
      uni.navigateBack({
        delta: 1
      })
    },
    goToHome () {
      uni.switchTab({
        url: '/pages/index/index'
      })
      //下方方法也可以回到首页 还可以传参 但是不建议使用---因为此方法会关闭其他所有页面（导致再次打开别的页面时候 会再次触发别的页面的onLoad）
      // uni.reLaunch({
      //   url: '/pages/index/index?id=1'
      // })
    }
  },
  mounted() {
  	let that = this
	uni.getSystemInfo({
		success: function(res){
			that.statusBarHeight = res.statusBarHeight
			let isIOS = res.system.indexOf('IOS') > -1
			that.barHeight = !isIOS ? 48:44
			that.barWidth = res.windowWidth
			// 获取右侧胶囊的信息 单位px
			// const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			//bottom: 胶囊底部距离屏幕顶部的距离
			//height: 胶囊高度
			//left:   胶囊左侧距离屏幕左侧的距离
			//right:  胶囊右侧距离屏幕左侧的距离
			//top:    胶囊顶部距离屏幕顶部的距离
			//width:  胶囊宽度
			// console.log(menuButtonInfo.width, menuButtonInfo.height, menuButtonInfo.top)
			// console.log('计算胶囊右侧距离屏幕右边距离', result.screenWidth - menuButtonInfo.right)
			// let menuWidth = menuButtonInfo.width + 'px'
			// that.barContHeight = menuButtonInfo.height
			// let menuBorderRadius = menuButtonInfo.height / 2 + 'px'
			// let menuRight = result.screenWidth - menuButtonInfo.right + 'px'
			// that.barContTop = menuButtonInfo.top
			// let contentTop = result.statusBarHeight + 44 + 'px'
		}
	})
  }
};
</script>

<style lang="less" scope>
.topbar {
  width: 100%;
  overflow: hidden;
  background-color: #ffda03;
}
.topbar-main {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.status-bar{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999;
	height: var(--status-bar-height);
}
.navbar-box{
	background-color: #ffda03;
	position: fixed;
	top: 20px;
	left: 0;
	width: 100%;
	padding: 0 16rpx;
	z-index: 999;
}
.navbar-cont{
	position: fixed;
	width: 100%;
	left: 0;
}
.addition-area{
	height: 30rpx;
	padding: 0 16rpx;
}
.addition-area-content{
	padding: 6rpx 16rpx;
	width: ;
}
</style>



